<template>
  <div>
    <quill-editor
        :options="editorOptions"
        v-model:content="content"
        theme="snow"
        contentType="html"
    ></quill-editor>

    <div style="margin: 20px 0;">
      <p>内容长度: {{ contentLength }}</p>
      <p>是否有内容: {{ hasContent ? '是' : '否' }}</p>
    </div>

    <el-button @click="showContent" type="primary">显示内容</el-button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
  name: 'RichTextEditor',
  components: {
    QuillEditor,
  },
  setup() {
    const content = ref('<p>初始内容</p>');

    // 计算属性
    const contentLength = computed(() => content.value.length);
    const hasContent = computed(() => content.value.length > 0);

    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      ['link', 'image', 'video'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'header': [1, 2, 3, false] }],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'align': [] }],
      ['clean']
    ];

    const editorOptions = {
      modules: {
        toolbar: toolbarOptions
      },
      placeholder: '请输入内容...',
      theme: 'snow'
    };

    const showContent = () => {
      console.log('富文本内容:', content.value);
      console.log('内容长度:', content.value.length);
      alert(`内容长度: ${content.value.length}\n内容: ${content.value}`);
    };

    return {
      content,
      contentLength,
      hasContent,
      editorOptions,
      showContent
    };
  }
};
</script>
